import React from 'react';
import MyTeam from '../team/MyTeam'
import * as teamAction from '../../actions/team.action'
import * as userAction from '../../actions/user.action'
import { resetOnboardingFlows, fetchOnboardingUnhandleTasks, fetchRole, delStaff, createDocument, updateOnboardingFlowStatus } from '../../actions/onboarding.hr.action'
import { clearAtList, fetchAtList } from '../../actions/app.action';
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { IconFont, Link } from '../../ui-components'
import style from './style.index'

export default
@connect(({ onboardingFlowsHr }) => ({ onboardingFlowsHr }), dispatch => ({actions: bindActionCreators({...teamAction, ...userAction, clearAtList, fetchAtList, fetchRole, fetchOnboardingUnhandleTasks, resetOnboardingFlows }, dispatch)}))
class HrIndex extends React.Component {

	static contextTypes = {
		router: React.PropTypes.object
	}

  componentWillUnmount() {
    this.props.actions.resetOnboardingFlows();
  }

  componentDidMount() {
    this.props.actions.fetchOnboardingUnhandleTasks();
  }

  render() {
    const { onboardingFlowsHr } = this.props
    const { tasks: tasksNumber } = onboardingFlowsHr
    const tasks = [
      { label: '待处理入职', n: tasksNumber[0] || '', to: '#/hr/onboarding/onboarding-flows?hasApproved=0' },
      { label: '员工批量邀请', n: tasksNumber[1] || '', to: `#/hr/settings/onboarding-inviting?isActivated=${tasksNumber[1]? 0: -1}` },
    ];
    return (
      <div>
        {
          tasks.length? (
            <div className={style.tasks}>
              {
                tasks.map((task, i) => !task.n? null: (
                  <Link to={task.to} key={task.label}>
                    <label>{ task.label }</label>
                    <span>
                      {
                        <span style={{ padding: '0 4px' }}>{task.n + `${i == 0? '人待处理': '人待激活'}`}</span>
                      }
                      <IconFont rotate="-90" value="arrow"/>
                    </span>
                  </Link>
                ))
              }
            </div>
          ): null
        }
        <MyTeam
          {...this.props}
          {...this.props.actions}
				  {...this.context}
          manage
        />
      </div>
    )
  }
}
